<template>
  <div>
    <h1>精准与否，就是屠宰和手术的区别。</h1>
    <!-- 图表 -->
    <div ref="chartDemodiv" style="width: 100%; height: 400px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import bookinfoApi from "@/api/bookinfo";
export default {
  data() {
    return {
      chartDemo: null,
      bookTypeData: {
        bookType: [],
        quantitySum: [],
      },
    };
  },
  created() {
    this.getbookTypeSum();
  },
  mounted() {
    this.drawLine();
  },
  computed: {
    options() {
      const option = {
        // 指定图表的配置项和数据
        title: {
          text: " 各种类型图书库存数量", //为图表配置标题
          left: "center",
          textStyle: {
            color: "red",
          },
        },
        tooltip: {
          //配置提示信息：
          trigger: "axis", //当 trigger 为’item’时，鼠标只有移到对应数据点才会显示该点的数据，为’axis’时鼠标移到该列的范围区域都会显示对应的数据。
          axisPointer: {
            type: "shadow", //指示器类型：line:直线型; shadow:阴影型; none:无; cross:十字准星型
          },
        },
        legend: {
          //配置图例
          top: 30, //设置图例距顶部距离，外面不要单引号，不要单位px
          data: [
            {
              name: "库存数量", //name 名称必须与 series 下的 name属性保持一致才有效
              // 强制设置图例图标为圆。
              icon: "circle", // 设置图例文本的效果
              textStyle: {
                color: "#545c64",
                fontFamily: "微软雅黑",
                fontSize: 16,
              },
            },
          ],
        },
        xAxis: {
          //x 轴
          type: "category", //type 坐标轴类型。 category：维度轴； value：度量轴
          /* data: ["编程类", "设计类", "前端类", "移动开发"], */
          data: this.bookTypeData.bookType,
        },
        yAxis: {
          //y 轴
          type: "value",
          min: 500, //刻度最小值
          interval: 50, //设置刻度间隔值
        },
        series: [
          {
            name: "库存数量",
            /* data: [620, 932, 901, 934], */
            data: this.bookTypeData.quantitySum,
            type: "line", //图表类型
          },
        ],
      };
      return option;
    },
  },
  methods: {
    getbookTypeSum() {
      bookinfoApi.getTypeSum().then((response) => {
        const resp = response.data;
        if (resp.flag) {
          this.bookTypeData.bookType = resp.data.bookType;
          this.bookTypeData.quantitySum = resp.data.quantitySum;
          console.log(this.bookTypeData.bookType);
          console.log(this.bookTypeData.quantitySum);
        } else {
          this.$message({
            message: resp.message,
            type: "warrning",
          });
        }
      });
    },
    drawLine() {
      //基于准备好的 dom，初始化 echarts 实例
      this.chartDemo = echarts.init(this.$refs["chartDemodiv"]);
      this.chartDemo.setOption(this.options,true);
      window.addEventListener("resize",this.chartDemo.resize);
    },
  },
  watch:{
    options(newVal,oldVal){
      if(newVal!==oldVal){
        this.chartDemo.setOption(newVal)
      }else{
        this.chartDemo.setOption(oldVal)
      }
    }
  }
};
</script>
<style scoped>
h1 {
  text-align: center;
  color: #fff;
}
</style>